<template>
    <div>
        <!-- 顶部导航栏 -->
        <div class="bookReviewListTop">
            <div class="bookReviewListContainer">
                <span class="iconfont icon-zuojiantou" @click="$router.go(-1)"></span>
                <span class="BRLTC_name" :style="{color:'rgba(0,0,0,'+opcy+')'}">{{bookInfo.entry.title}}</span>
                <!-- <div class="BRLTC_button" > -->
                <router-link class="BRLTC_button" tag="div" :to="'/ReadThePage?id='+bookID">
                    <span :style="{backgroundColor:'rgba(253, 201, 004, '+opcy+')',color:'rgba(0,0,0,'+opcy+')'}">立即免费阅读</span>
                </router-link>
                <!-- </div> -->
            </div>
        </div>
        <!-- 介绍 -->
        <div class="estimate">
            <div class="bookReviewListContainer">
                <div class="BRLC_introduce">
                    <div class="BRLCI_Img">
                        <img :src="BIF.cover" alt="">
                    </div>
                    <div class="BRLCI_Content">
                        <div class="BRLCIC_name">{{bookInfo.entry.title}}</div>
                        <div class="BRLCIC_writer">
                            <span>{{bookInfo.entry.author.name}}</span>
                            <!-- <div class="ReadBtn"> -->
                             <router-link class="ReadBtn" tag="div" :to="'/ReadThePage?id='+bookID">
                                <span>立即免费阅读</span>
                             </router-link>
                            <!-- </div> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 书评 -->
        <div class="BRL_bookReview">
            <div class="bookReviewListContainer">
                <div class="BRL_bookReview_title">
                    <p>书评<span>({{commentList.length}}条)</span></p>
                </div>
                <!-- <div class="commentClassification">
                    <span class="icon">全部</span>
                    <span>好看 2481</span>
                    <span>一般 412</span>
                    <span>不好看 39</span>
                    <span>打赏留言 936</span>
                    <span>精华 6</span>
                    <span>作者说 1</span>
                </div> -->
                <div class="TWDBR_Box">
                    <div class="TWDBRB_Comment" v-for="item in commentList" :key="item.userId" v-show="item.avatar">
                        <div class="TWDBRBC_info">
                            <div class="info_Img">
                                <img :src="item.avatar" alt="">
                            </div>
                            <div class="author">
                                <span class="A_Name">{{item.nickName}}</span>
                                <!-- <span class="A_Tag">作者</span> -->
                                <span class="LV_Tag">Lv {{item.grade}}</span>
                            </div>
                            <div class="info_right">
                                <span class="iconfont icon-gengduo"></span>
                            </div>
                        </div>
                        <div class="remark" @click="DZBtn">
                            <p class="remark_text">{{item.comment}}</p>
                            <p class="time_info">
                                <span class="time">{{item.time | Tiem}}</span>
                                <span>{{item.replyCount}}<span class="iconfont icon-31pinglun"></span></span>
                                <span>{{item.likes}}<span class="iconfont icon-dianzan1"></span></span>
                                <!-- <span class="dzcon" v-show="dzShow">{{item.likes+1}}<span class="iconfont icon-dianzan"></span></span> -->
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 评论 -->
        <div class="announce">
            <div class="announce_input">
                <input type="text" value="" v-model="value">
            </div>
            <div class="btn" @click="send">
                <span>发表</span>
            </div>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant';
import { getCommentGetComments } from '../api/bookReviewList';
import { getbookGetsub,getBookInfo } from  "../api/TheWorkDetails";
export default {
    data(){
        return{
            opcy:0,
            bgsize:60,
            color:"white",
            bookID:null,
            commentList:[],
            bookInfo:[],
            value:null,
            BIF:null,
            dzShow:false,
        }
    },
    methods:{
        // 点赞功能
        DZBtn(){
            this.dzShow = !this.dzShow;
            if(this.dzShow == false){
                Toast("取消点赞")
            }else{
                Toast("点赞成功")
            }
        },
        // 发表评论
        send(){
            if(!this.value==""){
                this.commentList.unshift({
                    userId:123456456,
                    avatar:"https://img0.baidu.com/it/u=4174622592,2828273755&fm=253&fmt=auto&app=120&f=JPEG?w=192&h=192",
                    nickName:"我自己",
                    grade:"5",
                    comment:this.value,
                    time:1641509990992,
                    replyCount:0,
                    likes:0,
                });
                this.value = "";
            }
        },
        // 获取书籍详细信息
        getbookGetsubFun(id){
            getbookGetsub({id:id}).then(data=>{
                this.bookInfo = data.feed;
                console.log(data)
            })
        },
        // 获取书籍评论
        getCommentGetCommentsFun(id){
            getCommentGetComments({bookId:id}).then(data=>{
                this.commentList = data.all.list;
                console.log(this.commentList)
            })
        },
        // 获取高度
        handleScroll(){
            let height = window.pageYOffset;
            // let top = this.$refs.backTop.getBoundingClientRect().top;
            // console.log('滚动高度',height)
            // console.log('距离顶部高度',top);
            this.opcy = height > 100? 1 : 0;
            this.bgsize = height >30? 30 : 60;
            // this.color = height > 100? "black":"white" 
            // console.log('用户信息=>',this.playlist)
            // console.log(window.localStorage,window.localStorage.uid,this.getUserDetaiFun())
        },
        // 获取用户简单信息
        getBookInfoFun(id){
            getBookInfo({sourceUuid:id}).then(data=>{
            console.log(data)
            this.BIF = data.data.book;
            console.log(this.BIF)
            })
        },
    },
    
    mounted(){
        window.addEventListener('scroll',this.handleScroll,true);
    },
    created(){
        this.bookID = this.$route.query.id;
        console.log(this.bookID)
        this.getCommentGetCommentsFun(this.bookID);
        this.getbookGetsubFun(this.bookID);
        this.getBookInfoFun(this.bookID);
    },
    filters:{
        Tiem(value){
            const t = new Date(value)
            // 日期格式
            const format = 'Y-m-d h:i:s'
            let year = t.getFullYear()
            // 由于 getMonth 返回值会比正常月份小 1
            let month = t.getMonth() + 1
            let day = t.getDate()
            let hours = t.getHours()
            let minutes = t.getMinutes()
            let seconds = t.getSeconds()
            month = month > 9 ? month : `0${month}`
            day = day > 9 ? day : `0${day}`
            hours = hours > 9 ? hours : `0${hours}`
            minutes = minutes > 9 ? minutes : `0${minutes}`
            seconds = seconds > 9 ? seconds : `0${seconds}`
            const hash = {
                'Y': year,
                'm': month,
                'd': day,
                'h': hours,
                'i': minutes,
                's': seconds
            }
            return format.replace(/\w/g, o => {
                return hash[o]
            })
        }
    },
    watch(){
        this.send();
    }
}
</script>

<style lang="less">
.bookReviewListContainer{
  width: 92%;
  margin: 0px auto;
}
.bookReviewListTop{
    padding: 11px 0px;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    background-color: #fff;
    transition: all .1s linear;
    box-shadow: 0px 0px 3px #eee;
    .bookReviewListContainer{
        display: flex;
        justify-content: space-between;
        align-items: center;
        span{
            font-size: 27px;
            font-weight: bold;
        }
        .BRLTC_name{
            width: 50%;
            font-size: 20px;
        }
        .BRLTC_button{
            span{
                font-size: 14px;
                padding: 5px 20px;
                border-radius: 20px;
                background-color: #fdc904;
                transition: all .1s linear;
            }
        }
    }
}
.estimate{
    padding: 20px 0px;
    padding-top: 71px;
    background-color: #fff;
    margin-bottom: 10px;
    .BRLC_introduce{
        display: flex;
        justify-content: space-between;
        .BRLCI_Img{
            width: 65px;
            height: 80px;
            background-color: pink;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .BRLCI_Content{
            width: 76%;
            .BRLCIC_name{
                font-size: 18px;
                font-weight: bold;
            }
            .BRLCIC_writer{
                display: flex;
                justify-content: space-between;
                align-items:flex-end;
                span{
                    font-size: 14px;
                    color: #aaa;
                }
                .ReadBtn{
                    margin-top: 25px;
                    padding: 5px 20px;
                    background-color: #fcd21b;
                    border-radius: 20px;
                    font-size: 14px;
                    span{
                        color: #333;
                        font-weight: bold;
                    }
                }
            }
        }
    }
}
.BRL_bookReview{
    background-color: #fff;
    padding-bottom: 47.4px;
    .BRL_bookReview_title{
        padding: 15px 0px;
        font-weight: bold;
        span{
            margin-left: 10px;
        }
    }
    .commentClassification{
      display: flex;
      flex-wrap: wrap;
      span{
        padding: 4px 10px;
        border-radius: 20px;
        background-color: #f8f8f8;
        font-size: 12px;
        margin-right: 12px;
        margin-bottom: 8px;
        color: #666;
      }
      span.icon{
        background-color: #fff4c2;
        color: #333;
      }
    }
    .TWDBR_Box{
      .TWDBRB_Comment{
        .TWDBRBC_info{
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 0px;
          .info_Img{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            overflow: hidden;
            background-color: aqua;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .author{
            width: 78%;
            .A_Name{
              font-size: 14px;
              color: #aaa;
              margin-right: 10px;
            }
            .A_Tag{
              background-color: #fcd335;
              font-size: 12px;
              padding: 1px 3px;
              border-radius: 4px;
            }
            .LV_Tag{
              font-size: 12px;
              padding: 1px 4px;
              background-color: #b6c6dd;
              border-radius: 20px;
              color: white;
            }
          }
          .info_right{
            span{
              color: #aaa;
            }
          }
        }
        .remark{
          padding-bottom: 10px;
          p.remark_text{
            width: 100%;
            font-size: 14px;
            line-height: 24px;
            word-wrap: break-word;
          }
          p.time_info{
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            span.time{
              width: 70%;
            }
            span{
              font-size: 13px;
              color: #aaa;
              span{
                font-size: 14px;
              }
            }
            span.dzcon{
                color: orangered;
                span{
                    color: orangered;
                }
            }
          }
        }
      }
    }
}
.announce{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 10px 0px ;
    text-align: center;
    background-color: #fff;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    box-shadow: 0px 0px 3px #eee;
    .announce_input{
        width: 85%;
        input{
            width: 90%;
            border: none;
            padding: 4px 0px;
            background:#f5f5f5;
        }
    }
    .btn{
        width: 15%;
        font-size: 14px;
    }
}
</style>